<script setup>
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router'
import { useCookies } from '@vueuse/integrations/useCookies'

const router = useRouter()
const cookie = useCookies()
const route = useRoute()
//当前激活的标签
const activeTab = ref(route.path)
//标签列表
const tabList = ref([
  {
    title: '后台首页',
    path: '/'
  }
])

//添加标签导航
const addTab = (tab) => {
  const noTab = tabList.value.find((item) => item.path === tab.path)
  if (!noTab) {
    tabList.value.push(tab)
  }
  cookie.set('tabList', tabList.value)
}

//监听路由变化
onBeforeRouteUpdate((to, from) => {
  activeTab.value = to.path
  addTab({
    title: to.meta.title,
    path: to.path
  })
})

//点击标签导航
const changeTab = (path) => {
  activeTab.value = path
  router.push(path)
}

//初始化标签导航列表
const initTabList = () => {
  let tbs = cookie.get('tabList')
  if (tbs) {
    tabList.value = tbs
  }
}

//执行标签导航列表初始化
initTabList()

//删除标签导航列表
const removeTab = (path) => {
  //判断当前关闭的标签是否是当前激活的标签
  if (activeTab.value === path) {
    //如果是，则在标签列表中获取到当前关闭标签的前一个标签数据或者后一个
    tabList.value.forEach((item, index) => {
      if (item.path === path) {
        const nextTab = tabList.value[index + 1] || tabList.value[index - 1]

        //获取到nextTab后，将激活的标签设置为nextTab.path
        if (nextTab) {
          activeTab.value = nextTab.path
        }
      }
    })
  }

  //留下我们所需要的标签列表数据
  tabList.value = tabList.value.filter((item) => item.path !== path)

  //更新存储的cookie
  cookie.set('tabList', tabList.value)
}

//关闭全部或者关闭其他
const onCommand = (val) => {
  console.log(val)
  //关闭所有
  if (val === 'clearAll') {
    //切换回首页
    activeTab.value = '/'
    //过滤只剩下首页
    tabList.value = [
      {
        title: '后台首页',
        path: '/'
      }
    ]
    //清除其他的
  } else if (val === 'clearOther') {
    //过滤只剩下首页和当前页面
    tabList.value = tabList.value.filter(
      (item) => item.path === '/' || item.path === activeTab.value
    )
  }

  //更新存储的cookie
  cookie.set('tabList', tabList.value)
}
</script>

<template>
  <div class="tag-list">
    <el-tabs
      @tab-change="changeTab"
      @tab-remove="removeTab"
      style="min-width: 100px"
      v-model="activeTab"
      type="card"
    >
      <el-tab-pane
        :closable="item.path != '/'"
        v-for="item in tabList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
      >
      </el-tab-pane>
    </el-tabs>
    <span class="tag-btn">
      <el-dropdown @command="onCommand">
        <span class="el-dropdown-link">
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
            <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
</template>

<style scoped>
.tag-list {
  background-color: #f6f6f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  /* padding: 0 10px; */
}

.tag-btn {
  background-color: aliceblue;
  height: 32px;
  width: 32px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: 0 !important;
}

:deep(.el-tabs__item) {
  border: 0 !important;
  background-color: white;
  margin: 0 1px;
  height: 32px;
  line-height: 32px;
  border-radius: 2px;
}

:deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: none;
}

:deep(.el-tabs) {
  transform: translateY(3px);
}

:deep(.el-tabs__new-tab) {
  transform: translateY(-3px);
}

:deep(.el-tabs__nav-prev) {
  transform: translateY(-3px);
}

:deep(.el-tabs__nav-next) {
  transform: translateY(-3px);
}
</style>
